<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
            <p>作者：{{author}}</p>
            <p>书名：{{title}}</p>
        </div>
		<script src="../../vue.js"></script>
        <script>
            const {reactive, toRef} = Vue;
            const app = Vue.createApp({
                setup(){
                    const book = reactive({
                        author: '孙鑫',
                        year: '2020',
                        title: 'Java无难事',
                        description: '让Java的学习再无难事',
                        price: '188'
                    })
                    //let { author, title } = toRefs(book);
                    // title.value = 'VC++深入详解'  // title现在是一个ref，需要使用.value
                    // console.log(book.title)      // 'VC++深入详解'
                    
                    const author = toRef(book, 'author');
                    const title = toRef(book, 'title');
					console.log("author = ",author);
					console.log(`author = ${author}`);
                    return {
                        author,
                        title
                    }
                }
            })
            const vm = app.mount('#app');
        </script>
	</body>
</html>